import React, { Component } from "react";
import "./input.css";

class Input extends Component {
  fn = (e) => {
    this.props.onChange(e.target.value, e);
  };

  render() {
    return (
      <div className="input-wrap">
        <input
          type="text"
          value={this.props.value}
          onChange={this.fn}
          maxLength={this.props.maxLength}
        />
        <span>
          {this.props.value.length}/{this.props.maxLength}
        </span>
      </div>
    );
  }
}

export default Input;
